<template>
  <div class="header">
    <div class="top">
      <el-button type="primary" @click="addTopic">添加</el-button>
      <el-button type="danger" @click="Alldelect">批量删除</el-button>
    </div>

    <div class="subject">
      <div class="subject-top">
        <input type="checkbox" v-model="showAll" @change="SelectAll" />
        <span style="width: 80px">数量</span>
        <span style="width: 100px; text-align: center">小图标</span>
        <span style="width: 110px">标题</span>
        <span style="width: 90px">开关</span>
        <span style="width: 140px">添加时间</span>
        <div>操作</div>
      </div>
      <div class="subject-body">
        <div
          class="subject-item"
          v-for="(item, index) in topicData.listData"
          :key="item.id"
        >
          <input type="checkbox" v-model="item.isinput" />
          <span style="width: 80px">{{ item.number }}</span>
          <img :src="item.src" alt="" />
          <span style="width: 110px">{{ item.title }}</span>
          <el-switch
            @change="setisShow(item.id, item.isShow)"
            v-model="item.isShow"
          />
          <span>{{ item.atime }}</span>
          <div>
            <el-button type="danger" plain @click="handleTopic(item)"
              >修改</el-button
            >
            <el-button type="danger" plain @click="deleteTopic(item.id, index)"
              >删除</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <DialogQuestionbank
      ref="addBanner"
      :type="type"
      @changeTableData="changeData"
    />
  </div>
</template>
<script setup>
import DialogQuestionbank from "../components/DialogQuestionbank.vue";
import { reactive, ref, getCurrentInstance, computed, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { timeTrans } from "../../utils";
import { getTopic, delTopic, setShow, allDel } from "../../api/questionbank";
const { proxy } = getCurrentInstance();

let topicData = reactive({
  listData: [], // 数据列表
  multipleSelection: [], // 选中项
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
});
// 添加组件
let type = ref("add");
// 声明
let addBanner = ref();
// 是否全选了
let showAlls = computed(() => {
  return topicData.listData.every((item) => {
    return item.isinput == true;
  });
});
// 控制全选
let showAll = ref(false);
//
watch(
  () => showAlls.value,
  (newValue, oldValue) => {
    showAll.value = newValue;
  }
);
// 全选 反选
function SelectAll() {
  console.log(showAll.value);
  if (showAll.value) {
    topicData.listData.forEach((item, index, arr) => {
      arr[index].isinput = true;
    });
  } else {
    topicData.listData.forEach((item, index, arr) => {
      arr[index].isinput = false;
    });
  }
}

// 子传父
const changeData = (data) => {
  data.forEach((item) => {
    // 处理是否展示图片
    if (item.isShow === 1) {
      item.isShow = true;
    } else {
      item.isShow = false;
    }
    // 处理时间
    item.atime = timeTrans(item.atime);
  });
  topicData.listData = data;
};
// 获取数据
async function getTopicPush() {
  const Topic = await getTopic(proxy);

  Topic.forEach((item) => {
    // 处理是否展示图片
    if (item.isShow === 1) {
      item.isShow = true;
    } else {
      item.isShow = false;
    }
    // 处理时间
    item.atime = timeTrans(item.atime);
  });

  topicData.listData = Topic;
}
getTopicPush();
// 删除
function deleteTopic(id, index) {
  ElMessageBox.confirm("是否要删除这一项?", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 删除数据库
      delTopic(proxy, { id });
      topicData.listData.splice(index, 1);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}
//
let ShowTure = computed(() => {
  return topicData.listData.filter((item) => {
    return item.isinput == true;
  });
});
// 页面先删除
// 删除多个
function Alldelect() {
  ElMessageBox.confirm("是否要删除这一项?", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let data = [];
      for (let i = 0; i < ShowTure.value.length; i++) {
        data.push(ShowTure.value[i].id);
      }
      // 然后页面删除
      topicData.listData = topicData.listData.filter((item) => {
        return item.isinput == false;
      });
      allDel(proxy, { data });
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}
//修改上架
function setisShow(id, isShow) {
  console.log(id, isShow);
  setShow(proxy, { id, isShow })
    .then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
      }
    })
    .catch((err) => {});
}
// 添加题库
function addTopic() {
  type.value = "add";
  addBanner.value.open();
}
// 修改题库
// 修改轮播图片
const handleTopic = (banner) => {
  type.value = "edit";
  addBanner.value.open(banner);
  console.log(banner);
};
</script>

<style scoped>
.header {
  border: 1px solid #ddd6c1;
  padding: 20px 0px;
  box-sizing: border-box;
  min-width: 900px;
}
.top {
  border-bottom: 1px solid #f0ece1;
  padding-bottom: 20px;
  padding-left: 20px;
}
.subject {
  padding: 0px 20px;
}
.subject-top {
  display: flex;
  justify-content: space-between;
  height: 60px;
  align-items: center;
  border-bottom: 1px solid #f0ece1;
}
.subject-top > div {
  width: 100px;
}
.subject-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0ece1;
  height: 120px;
}
.subject-item > img {
  width: 100px;
  height: 100px;
}
</style>
